<template>
  <div id="building" style="margin-top: 10px; margin-bottom: 80px">
    <el-card>
      <div class="text-container">
        <div style="padding: 20px; color: #888;">
          <quill-editor
            v-model="entity.content"
            :options="editorOptions"
            placeholder="添加评论..."
            @blur="onEditorBlur"
          ></quill-editor>
          <div style="text-align: right; padding: 10px;">
            <el-button type="primary" @click="save">发送</el-button>
          </div>
        </div>

        <!-- 渲染评论列表 -->
        <div class="comment-list">
          <comment-item
            v-for="item in commentsList"
            :key="item.id"
            :item="item"
            :depth="0"
            @reply="reply"
            @delete="del"
          ></comment-item>

        </div>

        <!-- 分页控件 -->
        <el-pagination
          v-if="commentsList.length > 0"
          @current-change="handleCurrentChange"
          :current-page="queryParam.pageNum"
          :page-size="queryParam.pageSize"
          :total="totalComments"
          layout="total, prev, pager, next, jumper"
        ></el-pagination>
      </div>
      <img src="/static/img/img.png" alt="背景图片" class="background-image">
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';
import request from "@/utils/request";
import { listComment } from "@/api/comment/comment";
import CommentItem from "@/views/comment/comment/CommentItem";
import 'quill/dist/quill.core.css'; // Quill 样式
import 'quill/dist/quill.snow.css'; // Quill 雪花主题样式
import 'quill/dist/quill.bubble.css'; // Quill 气泡主题样式
import 'vue-quill-editor/dist/ssr'; // SSR 支持

export default {
  name: "Comment",
  components: {
    CommentItem,
    quillEditor
  },
  data() {
    return {
      loading: true,
      commentsList: [],
      totalComments: 0, // 用于保存总评论数
      entity: {
        content: '',
        parentId: null // 回复关联的父评论ID
      },
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        id: '',
      },
      editorOptions: {
        modules: {
          toolbar: [
            [{ 'header': [1, 2, false] }],
            ['bold', 'italic', 'underline'],
            ['link', 'image'],
            ['clean'] // 清除格式
          ]
        },
        placeholder: '添加评论...',
      }
    };
  },
  created() {
    this.getlist(); // 组件创建时获取评论列表
  },
  methods: {
    onEditorBlur() {
      // 可以处理编辑器失去焦点的逻辑
    },
    getlist() {
      this.loading = true;
      listComment(this.queryParam).then(res => {
        this.commentsList = res.rows; // 评论数据
        this.totalComments = res.total; // 假设返回数据包含总评论数
        this.loading = false;
      });
    },
    handleCurrentChange(pageNum) {
      this.queryParam.pageNum = pageNum; // 更新当前页码
      this.getlist(); // 获取新页码的评论列表
    },
    reply(replyData) {
      const dataToSend = {
        content: replyData.content,
        parentId: replyData.parentId,
      };

      request.post("/comment/comment/add", dataToSend).then(() => {
        this.$message({
          message: "回复成功",
          type: "success"
        });
        this.getlist(); // 刷新评论列表
      });
    },
    del(id) {
      request.delete("/comment/comment/" + id).then(() => {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.getlist(); // 刷新评论列表
      });
    },
    save() {
      const dataToSend = {
        content: this.entity.content,
        parentId: null // 顶级评论的parentId为null
      };

      request.post("/comment/comment/add", dataToSend).then(() => {
        this.$message({
          message: "评论成功",
          type: "success"
        });
        this.entity.content = ''; // 重置输入
        this.getlist(); // 刷新评论列表
      });
    }
  }
};
</script>

<style scoped>
#building {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 10px;
}

.text-container {
  position: relative;
  z-index: 2;
}

.comment-list {

  padding: 20px;                     /* 内边距 */
  background: transparent;           /* 透明背景 */
  margin-top: 20px;                  /* 上部间距 */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.5; /* 背景透明度 */
  pointer-events: none;
}
</style>
